<template>
  <div>
    <JFind @clickNumber="clickNumber" @findClicked="findData3" @Launchform="Launchform5" :searchTitle="'单色系筛选条件查询'" :OriginalFilter="{ static: true }" :formList="formList" />

   

    <div class="flex mt10">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div slot="header">
          <span style="color: #00ff00; font-size: 14px">工厂货号绿色代表:该工厂货号 + 配色已检核</span>
        </div>
        <Table :tableHeader="tableHeader" :tableData="tableData" :isLoading="isLoading" @currentRow="currentRow" />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div slot="header" class="f16">
          <span style="font-weight: 600" class="mr24">订单明细</span>
          <span style="color: red; font-size: 14px">指令号为红色代表: 有指令已经配套OK不能再更改裁剪工艺</span>
        </div>
        <Table
          :tableHeader="tableHeader2"
          :tableData="tableData2"
          @checkboxChange="checkboxChange"
          :getTableList="currentRow"
        />
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
  </div>
    
</template>
<script lang="ts">
  import { defineComponent,onMounted,ref } from 'vue';
  import {getOrderTypeList,getOrderDetailList,getCheck,getUpdate} from '@/api/exploitation/FilingColorInformation'
import service from '@/utils/request';
import { ElMessage } from 'element-plus';
import { RdTypeBodyFileSampleType } from '@/api/ControlDepartment/MaterialManagement/RdTypeBodyFileList';
  export default defineComponent({
    name:'FilingColorInformation'
  })

</script>

<script lang="ts" setup>

// 检核
const getCheckParms = ref()
const getCheckMethods = async() => {
  try {
    const result = await getCheck(getOrderDetailListParms.value)
    if(result.code === 200) {
      ElMessage.success(result.msg) 
      getOrderTypeListMethods()
    }else{
      ElMessage.error(result.msg)
    }
  } catch (error) {
    ElMessage.error('检核失败')
  }
}

const tableHeader2 = ref([
  {
    backgroundColor: true,
    label: '指令号',
    prop: 'orderId',
    width: 180
  },
  {
    label: '样品类型',
    prop: 'sampleType'
  },
  {
    type: 'checkbox',
    label: '新版',
    prop: 'newFlag',
    width: 60
  },
  {
    type: 'checkbox',
    label: '旧版',
    prop: 'oldFlag',
    width: 60
  },
  {
    type: 'checkbox',
    label: '改版',
    prop: 'gbFlag',
    width: 60
  },
  {
    Multistage: true,
    label: '裁剪工艺(本厂)',
    children: [
      {
        label: '电雕',
        width: '50',
        type: 'checkbox',
        prop: 'embroidFlag'
      },
      {
        label: '印刷/胶印',
        width: '52',
        type: 'checkbox',
        prop: 'printFlag'
      },
      {
        label: '无缝',
        width: '50',
        type: 'checkbox',
        prop: 'sewFlag'
      },
      {
        label: '高频/热切',
        width: '52',
        type: 'checkbox',
        prop: 'hfFlag'
      }
    ]
  },
  {
    Multistage: true,
    label: '裁剪工艺(外发)',
    children: [
      {
        label: '外发胶印',
        width: '52',
        type: 'checkbox',
        prop: 'outJy'
      },
      {
        label: '分化',
        width: '50',
        type: 'checkbox',
        prop: 'outFh'
      },
      {
        label: '电绣',
        width: '50',
        type: 'checkbox',
        prop: 'outDx'
      },
      {
        label: '外发热切',
        width: '52',
        type: 'checkbox',
        prop: 'outRq'
      }
    ]
  }
])
const tableData2 = ref([])

// 订单明细查询
const getOrderDetailListParms = ref()
const getOrderDetailListMethods = async() => {
 try {
  const result = await getOrderDetailList(getOrderDetailListParms.value)
  tableData2.value = result.data.map((item: any) => {
    item.newFlag === 'Y' ? (item.newFlag = true) : (item.newFlag = false)
    item.oldFlag === 'Y' ? (item.oldFlag = true) : (item.oldFlag = false)
    item.gbFlag === 'Y' ? (item.gbFlag = true) : (item.gbFlag = false)
    item.embroidFlag === 'Y' ? (item.embroidFlag = true) : (item.embroidFlag = false)
    item.printFlag === 'Y' ? (item.printFlag = true) : (item.printFlag = false)
    item.sewFlag === 'Y' ? (item.sewFlag = true) : (item.sewFlag = false)
    item.hfFlag === 'Y' ? (item.hfFlag = true) : (item.hfFlag = false)
    item.outJy === 'Y' ? (item.outJy = true) : (item.outJy = false)
    item.outFh === 'Y' ? (item.outFh = true) : (item.outFh = false)
    item.outDx === 'Y' ? (item.outDx = true) : (item.outDx = false)
    item.outRq === 'Y' ? (item.outRq = true) : (item.outRq = false)
    item.change = 'Y'
    if (item.match === 'Y') {
      item.backgroundColor = '#ff0000'
      tableHeader2.value.forEach((ele: any) => {
        if (ele.Multistage === true) {
          ele.children.forEach((childrenList: any) => (childrenList.disable = true))
        }
      })
    } else {
      tableHeader2.value.forEach((ele: any) => {
        if (ele.Multistage === true) {
          ele.children.forEach((childrenList: any) => (childrenList.disable = false))
        }
      })
    }
    return item
  })
 } catch (error) {
  ElMessage.error('查询失败')
 } 
}

const checkboxChange = async(a: any, row: any) => {
  if(a !== undefined){
    if (row === 'newFlag' || row === 'oldFlag' || row === 'gbFlag') {
    a.newFlag = false
    a.oldFlag = false
    a.gbFlag = false
    a[row] = true

    a.newFlag === true ? (a.newFlag = 'Y') : (a.newFlag = '')
    a.oldFlag === true ? (a.oldFlag = 'Y') : (a.oldFlag = '')
    a.gbFlag === true ? (a.gbFlag = 'Y') : (a.gbFlag = '')
    a.embroidFlag === true ? (a.embroidFlag = 'Y') : (a.embroidFlag = '')
    a.printFlag === true ? (a.printFlag = 'Y') : (a.printFlag = '')
    a.sewFlag === true ? (a.sewFlag = 'Y') : (a.sewFlag = '')
    a.hfFlag === true ? (a.hfFlag = 'Y') : (a.hfFlag = '')
    a.outJy === true ? (a.outJy = 'Y') : (a.outJy = '')
    a.outFh === true ? (a.outFh = 'Y') : (a.outFh = '') 
    a.outDx === true ? (a.outDx = 'Y') : (a.outDx = '')
    a.outRq === true ? (a.outRq = 'Y') : (a.outRq = '')
    await service.post('/mes/pc/orderType/setNewOld', a)
  }
  }else{
    row.newFlag === true ? (row.newFlag = 'Y') : (row.newFlag = '')
    row.oldFlag === true ? (row.oldFlag = 'Y') : (row.oldFlag = '')
    row.gbFlag === true ? (row.gbFlag = 'Y') : (row.gbFlag = '')
    row.embroidFlag === true ? (row.embroidFlag = 'Y') : (row.embroidFlag = '')
    row.printFlag === true ? (row.printFlag = 'Y') : (row.printFlag = '')
    row.sewFlag === true ? (row.sewFlag = 'Y') : (row.sewFlag = '')
    row.hfFlag === true ? (row.hfFlag = 'Y') : (row.hfFlag = '')
    row.outJy === true ? (row.outJy = 'Y') : (row.outJy = '')
    row.outFh === true ? (row.outFh = 'Y') : (row.outFh = '') 
    row.outDx === true ? (row.outDx = 'Y') : (row.outDx = '')
    row.outRq === true ? (row.outRq = 'Y') : (row.outRq = '')
    await service.post('/mes/pc/orderType/setNewOld', row)
  }
  

  
  ElMessage({
    type: 'success',
    message: '修改成功'
  })
  getOrderDetailListMethods()
}

// 修改
const getUpdateMethods =  async(row:any) => {
  const result = await getUpdate(row)
  if(result.code === 200) {
    ElMessage.success(result.msg)
    getOrderTypeListMethods() 
  }else{
    ElMessage.error(result.msg)
  }
}

const confirmChange = async(row:any) => {
  row.newFlag === true ? (row.newFlag = 'Y') : (row.newFlag = '')
  row.oldFlag === true ? (row.oldFlag = 'Y') : (row.oldFlag = '')
  row.gbFlag === true ? (row.gbFlag = 'Y') : (row.gbFlag = '')
  row.embroidFlag === true ? (row.embroidFlag = 'Y') : (row.embroidFlag = '')
  row.printFlag === true ? (row.printFlag = 'Y') : (row.printFlag = '')
  row.sewFlag === true ? (row.sewFlag = 'Y') : (row.sewFlag = '')
  row.hfFlag === true ? (row.hfFlag = 'Y') : (row.hfFlag = '')
  row.outJy === true ? (row.outJy = 'Y') : (row.outJy = '')
  row.outFh === true ? (row.outFh = 'Y') : (row.outFh = '')
  row.outDx === true ? (row.outDx = 'Y') : (row.outDx = '')
  row.outRq === true ? (row.outRq = 'Y') : (row.outRq = '')
  await service.put('/mes/pc/orderType/setNewOld', row)

}
const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}
const RdTypeBodyFileCodeTableDat = ref([])
const RdTypeBodyFileCodeMethods = async() =>{
  const result = await RdTypeBodyFileSampleType()
  formList.value[2].selectOptions = EvaluatesTheArrayReturnValue(result.data)
}
const imgList = ref<any>([])
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  getOrderDetailListParms.value = row
  getOrderDetailListMethods()
  
}
const isLoading = ref(true)
  const tableData = ref([])
  const getOrderTypeListParms = ref({
    brand: "",
    check: "",
    dataScope: "",
    isAsc: "",
    orderByColumn: "",
    orderEndTime: "",
    orderId: "",
    orderStartTime: "",
    pageNum: 1,
    pageSize: 40,
    reasonable: true,
    sampleType: "",
    season: "",
    style: ""
  })

  const Launchform5 = (row:any) => {
    getOrderTypeListParms.value.orderId = row[0].inputValue
    getOrderTypeListParms.value.style = row[1].inputValue
    getOrderTypeListParms.value.sampleType = row[2].selectValue
    getOrderTypeListParms.value.orderStartTime = row[3].dateValue[0]
    getOrderTypeListParms.value.orderEndTime = row[3].dateValue[1]
    
}

const clickNumber = (row:any) => {
  if(row === '3'){
    getOrderTypeListParms.value.check = '1'
  }
  if(row === '1'){
    getOrderTypeListParms.value.check = '' 
  }
  if(row === '2'){
    getOrderTypeListParms.value.check = '2' 
  }

  
  getOrderTypeListMethods()
}

  const total = ref(0)
const handleSizeChange = (val: number) => {
  getOrderTypeListParms.value.pageSize = val
  getOrderTypeListMethods()
}
const handleCurrentChange = (val: number) => {
  getOrderTypeListParms.value.pageNum = val
  getOrderTypeListMethods()
}
  const getOrderTypeListMethods = async() => {
    isLoading.value = true

      const result = await getOrderTypeList(getOrderTypeListParms.value)
      total.value = result.total
      tableData.value = result.rows.map((item: any) => {
        if(item.cfmFlag === 'Y'){
          item.cfmFlag = '已检核'
        }else{
          item.cfmFlag = '未检核'  
        }
        if(item.cfmFlag === '已检核'){
          item.backgroundColor = '#90EE90'
        }else{
          item.backgroundColor = '#ffffff'
        }
        return item
      
  })
      tableData.value = result.rows.map((item:any) => { 
        item.photoPath = Object.values(result.files).find((item1:any) => {  
          return item1.fileId === item.photoId; // 查找合匹配的 photoId  
        });  
        

      if (item.cfmFlag === 'Y') {
        item.backgroundColor = '#80FF00'
      }
        return item
      })
      if(tableData.value.length !== 0){
        getOrderDetailListParms.value = tableData.value[0]
        getOrderDetailListMethods()
      }
      imgList.value = result.rows.map((item:any) => {
          const {buckName,fileName} = item.photoPath
          return {buckName,fileName}
      })
  await Promise.all(
    tableData.value.map(async (item:any) => {
        const result = await service.get<any, any>(`/file/oss/view/${item.photoPath.buckName}/${item.photoPath.fileName}`);
        item.photoPath = 'data:image/png;base64,'+result.data
        return 'data:image/png;base64,'+result.data
      })
    );
    imgList.value = await Promise.all(  
      imgList.value.map(async (item:any) => {  
        const result = await service.get<any, any>(`/file/oss/view/${item.buckName}/${item.fileName}`);  
        return 'data:image/png;base64,'+result.data
      })  
    );  
    
    


    

    
    isLoading.value = false
  }

  onMounted(()=>{
    getOrderTypeListMethods()

    RdTypeBodyFileCodeMethods()
  })

const findData3 = (row:any) => {
  if (row === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if(row === '搜索'){
    getOrderTypeListMethods() 
  }
  if(row === '检核'){
    getOrderDetailListParms.value.cfmFlag = 'Y'
    getCheckMethods()
  }
  if(row === '取消检核'){
    getOrderDetailListParms.value.cfmFlag = ''
    getCheckMethods()
  }
}

const formList = ref([
{
    type: 'input',
    inputPlaceholder: '请输入指令号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入工厂货号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '样品类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '下单日期',
    dateValue: ''
  },
  {
    type: 'radio',
    checkboxLabel: '已检核',
    label: '3'
  },
  {
    type: 'radio',
    checkboxLabel: '未检核',
    label: '2'
  },
  {
    type: 'radio',
    checkboxLabel: '全部',
    label: '1'
  },
  {
    type: 'button',
    checkboxLabel: '搜索',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '检核'
  },
  {
    type: 'button',
    checkboxLabel: '取消检核'
  },
  // {
  //   type: 'checkbox',
  //   checkboxLabel: '新旧款未定义',
  //   checked: true
  // }
])

const tableHeader = ref([
  {
    label: '指令号',
    prop: 'orderId',
    width: 180
  },
  {
    label: '检核状态',
    prop: 'cfmFlag'
  },
  {
    backgroundColor: true,
    label: '工厂货号',
    prop: 'style',
    width: 120
  },
  {
    backgroundColor: true,
    label: '颜色',
    prop: 'color',
    width: '115px'
  },
  {
    label: '楦头',
    prop: 'lastNo',
    width: '115px'
  },
  {
    label: '大底',
    prop: 'moldNo'
  },
  {
    type: 'img',
    label: '图片',
    fixed: true,
    prop: 'photoPath',
    srcList: imgList
  }
])
</script>

<style lang="less" scoped>
</style>
